<template>
  <div class="complaint">
    <div class="blocked">
      <div class="left_btn btn" :class="{active:act == 1}" @click="clickBtn(1)">我发起的申诉</div>
      <div class="right_btn btn" :class="{active:act == 2}" @click="clickBtn(2)">我收到的申诉</div>
    </div>
    <div v-if="isshow">
      <div class="cardbox" v-for="item in list" :key="item.id">
        <p class="triangle" :class="{'after':item.status == 2}">{{item.status == 1 ? '未处理' : '已处理'}}</p>
        <p class="theme">{{item.top}}</p>
        <p class="person">
          <span style="text-align:right;">{{item.create_time}}</span>
          <span style="font-size:14px;">申诉人：{{item.addpeople}}</span>
        </p>
        <span>{{item.content}}</span>
        <p class="waitbtn">
          <span v-if="act == 1 && item.top!== '系统自动检测-S'" @click="ondelete(item.id)">删除</span>
          <span v-else class="wait" @click="onWaiting(item.id)">待处理</span>
        </p>
      </div>
      <van-pagination v-model="page" :page-count="total" mode="simple" @change="pageChange"/>
    </div>
    <div class="nodata" v-else>
      <img src="../assets/img/nodata.png" alt="">
      <span class="textcontent">没有申诉的内容哦~</span>
    </div>
  </div>
</template>
<script>
import { Appeallist,receive_appeal,dealwith_appeal,deleAppeal } from '../api/api';
import aestool from '@/utils/aestool.js';
export default {
  data(){
    return{
      act:1,
      sstitle:'',
      sstext:'',
      list: [],
      // loading: false,
      // finished: false,
      page:1,
      total:0,
      isshow:false
    }
  },
  created(){
    this.getListData()
  },
  methods:{
    getListData(){
      let toastload = this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      let params = {
        types:this.act == 1 ? 'user' : 'teacher',
        page:this.page,
        page_size:10
      }
      if(this.act == 1){
        Appeallist(params).then(res=>{
          toastload.clear()
          if(res.Status == 200){
            this.isshow = true
            this.total = Math.ceil(res.Count/10)
            let temp = JSON.parse(aestool.decrypt(res.Data,'123456asdzxcqwe0'))
            let ipos
            temp.forEach(item => {
              ipos = item.create_time.indexOf("+")
              item.create_time = item.create_time.replace(/T/g," ").substring(0,ipos)
            });
            this.list = temp
            console.log('发起',this.list)
          }else{
            this.isshow = false
          }
        })
      }else if(this.act == 2){
        receive_appeal(params).then(res=>{
          toastload.clear()
          if(res.Status == 200){
            this.isshow = true
            this.total = Math.ceil(res.Count/10)
            let temp = JSON.parse(aestool.decrypt(res.Data,'123456asdzxcqwe0'))
            let ipos
            temp.forEach(item => {
              ipos = item.create_time.indexOf("+")
              item.create_time = item.create_time.replace(/T/g," ").substring(0,ipos)
            });
            this.list = temp
            console.log('发起',this.list)
          }else{
            this.isshow = false
          }
        })
      }
    },
    pageChange(val){
      this.page = val
      this.getListData()
    },
    //待处理
    onWaiting(idx){
      let toastload = this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      let params = {
        delinfo:aestool.encrypt(idx,'123456asdzxcqwe0')
      }
      dealwith_appeal(params).then(res=>{
        console.log('处理',res)
        toastload.clear()
        if(res.Status == 200){
          this.page = 0
          this.list = []
          this.getListData()
          this.$toast(res.Message)
        }else{
          this.$toast(res.Message)
        }
      })
    },
    //删除
    ondelete(idx){
      let toastload = this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      let params = {
        delinfo:aestool.encrypt(idx,'123456asdzxcqwe0')
      }
      deleAppeal(params).then(res=>{
          toastload.clear()
        if(res.Status == 200){
          this.page = 0
          this.list = []
          this.getListData()
          this.$toast(res.Message)
        }else{
          this.$toast(res.Message)
        }
      })
    },
    clickBtn(idx){
      if(this.act == idx){
        return
      }else{
        this.act = idx
        this.page = 1
        this.getListData()
      }
    },
  }
}
</script>
<style lang="stylus" scoped>
.complaint{
  overflow hidden
  background #fff
  padding 15px 0
  .nodata{
    padding-top:80px
    display flex
    flex-direction column
    justify-content center
    align-items center
    img{
      width 70%
    }
    .textcontent{
      font-size 14px
      color #a79478
    }
  }
  .blocked{
    padding 10px 0 16px 0
		display flex
		justify-content center
		align-items center
	}
  .btn{
    font-size 14px
    line-height 30px
    background #b5d4ff
    padding 0 30px
    color #fff
    box-shadow 0px 1px 6px 0px #b5d4ff
  }
	.left_btn{
		border-top-left-radius 30px
		border-bottom-left-radius 30px
	}
	.right_btn{
		border-top-right-radius 30px
		border-bottom-right-radius 30px
	}
	.active{
		background-color #6ba9ff
	}
  .cardbox{
    margin 10px 16px
    border-radius 6px
    padding 10px 15px
    box-shadow 0px 1px 6px 0px #f1f1f1
    font-size 14px
    overflow hidden
    position relative
    .triangle{
      background #fd9900
      position absolute
      top 10px
      right 0
      border-top-left-radius 10px
      border-bottom-left-radius 10px
      line-height 26px
      padding 0 10px
      color #ffffff
    }
    .after{
      background #32cd99
    }
    .theme{
      font-size 18px
      line-height 30px
    }
    .person{
      color #bcbcbc
      // display flex
      // justify-content space-between
      // align-items center
      line-height 26px
      span{
        display block
      }
    }
    .waitbtn{
      text-align right
      span{
        display inline-block
        background #ee0a24
        color #fff
        width 80px
        text-align center
        line-height 26px
        border-radius 15px
      }
      .wait{
        background #1989fa
      }
    }
  }
}
</style>

